<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .counter-tj{
            counter-reset: counttj;
        }
        .counter-tj input:checked{
            counter-increment: counttj 1;
        }
        .tj-result:after{
            content: counter(counttj);
        }

        .counter-tj2{
            counter-reset: tj2 0;
        }
        .counter-tj2 >li{
            counter-increment: tj2 1;
        }
        .counter-tj2 >li:before, .tj2-result:after{
            content: counter(tj2)'. ';
            color: red;
        }

        .operation, .tj3-result, .operation >label, .operation >input{
            padding: 0;
            vertical-align: middle;
            display: inline-block;
        }
        .operation >input{
            visibility: hidden;
            position: absolute;
        }
        .operation >label{
            padding: .6rem 1.5rem;
            background-color: #f2f2f2;
            font-size: 20px;
            cursor: pointer;
        }
        .operation >input:checked+label{
            background-color: orange;
            color: #fff;
        }
        .tj3-result, .tj3-result:after{
            font-size: 24px;
            color: orange;
        }

        
        .operation{
            counter-reset: sum;
        }
        #oa:checked{ counter-increment: sum 10; }
        #ob:checked{ counter-increment: sum 20; }
        #oc:checked{ counter-increment: sum 40; }
        #od:checked{ counter-increment: sum -20; }
        #oe:checked{ counter-increment: sum -10; }
        #of:checked{ counter-increment: sum -40; }
        #og:checked{ counter-increment: sum 50; }

        .tj3-result:after{
            content: counter(sum);
        }
    </style>
</head>
<body>
    <h1>Content</h1>

    <h2>选项统计</h2>
    <ul class="counter-tj">
        <li><input type="checkbox" id="a"> <label for="a">item a</label></li>
        <li><input type="checkbox" id="b"> <label for="b">item b</label></li>
        <li><input type="checkbox" id="c"> <label for="c">item c</label></li>
        <li><input type="checkbox" id="d"> <label for="d">item d</label></li>
        <li><input type="checkbox" id="e"> <label for="e">item e</label></li>
        <li><input type="checkbox" id="f"> <label for="f">item f</label></li>
        <li><input type="checkbox" id="g"> <label for="g">item g</label></li>
    </ul>
    <div class="tj-result">已选择项数量为：</div>

    <ul class="counter-tj2">
        <li>item a</li>
        <li>item b</li>
        <li>item c</li>
        <li>item d</li>
        <li>item e</li>
        <li>item f</li>
        <li>item g</li>
    </ul>
    <div class="tj2-result">总数量为：</div>

    <h2>加减法</h2>
    <div class="operation">
        <input type="checkbox" id="oa"><label for="oa">+10</label>
        <input type="checkbox" id="ob"><label for="ob">+20</label>
        <input type="checkbox" id="oc"><label for="oc">+40</label>
        <input type="checkbox" id="od"><label for="od">-20</label>
        <input type="checkbox" id="oe"><label for="oe">-10</label>
        <input type="checkbox" id="of"><label for="of">-40</label>
        <input type="checkbox" id="og"><label for="og">+50</label>
    </div>
    <div class="tj3-result">=</div>
</body>
</html>